<template>
  <div class="trolley_container">
    <!-- 头部 -->
    <div class="trolley_one_container">
      <div class="images_container">
        <van-uploader v-model="fileList" multiple :max-count="1" />
      </div>
      <div class="login_cotnainer">
        <div class="title_container">
          <div @click="onClickLogin" class="login" v-show="isShowL">立即登录</div>
          
        </div>
        <div class="title_jifen_container">积分{{ 0 }}</div>
        <br/>
        <div v-show="isShowD" style="font-size:16px" @click="deleteToken">退出登录</div>
      </div>
    </div>
    <!-- 广播 -->
    <div class="guangbo_container">
      <van-notice-bar
        scrollable
        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
      />
    </div>
    <!-- 我的订单 -->
    <div class="dingdan_container">
      <div class="top_contaibner">
        <div class="top_wrapper">
          <div>我的订单</div>
          <div>></div>
        </div>
      </div>
      <div class="nav_cotnaienr">
        <div class="nav_wrapper">
          <div>
            <div><van-icon name="paid" /></div>
            <div class="title_zi_container">待付款</div>
          </div>
          <div>
            <div><van-icon name="send-gift-o" /></div>
            <div class="title_zi_container">代发货</div>
          </div>
          <div>
            <div><van-icon name="logistics" /></div>
            <div class="title_zi_container">待收货</div>
          </div>
          <div>
            <div><van-icon name="comment-o" /></div>
            <div class="title_zi_container">待评价</div>
          </div>
        </div>
      </div>
    </div>
    <!-- buttom -->
    <div class="buttom_container">
      <div class="liu_container">
        <div><i class="van-icon van-icon-gold-coin-o"></i></div>
        <div class="title_liu_container">我的余额</div>
      </div>
      <div class="liu_container">
        <div><i class="van-icon van-icon-edit"></i></div>
        <div class="title_liu_container">我的砍价</div>
      </div>
      <div class="liu_container">
        <div><i class="van-icon van-icon-coupon-o"></i></div>
        <div class="title_liu_container">我的礼卷</div>
      </div>
      <div class="liu_container">
        <div><i class="van-icon van-icon-star-o"></i></div>
        <div class="title_liu_container">我的收藏</div>
      </div>
      <div class="liu_container">
        <div class="liu_container_qi"><van-icon name="location-o" /></div>
        <div class="title_liu_container">我的地址</div>
      </div>
      <div class="liu_container">
        <div><i class="van-icon van-icon-service-o"></i></div>
        <div class="title_liu_container">联系客服</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Uploader } from "vant";

Vue.use(Uploader);
import { Toast } from 'vant';

Vue.use(Toast);
export default {
  data() {
    return {
      fileList: [],
      isShowL:true,
      isShowD:false
    };
  },
  methods:{
    onClickLogin(){
      this.$router.push(this.$myRouter.PathConfig.LOGIN)
    },
    deleteToken(){
      localStorage.removeItem("token");
      Toast.success('退出成功!');
      this.$router.go(0)

    }
  },
  mounted(){
    let Token = JSON.parse(localStorage.getItem("token"));
    // let login =  document.querySelectorAll('.login');
    if(Token){
      this.isShowL = false;
      this.isShowD = true;
    }else{
      this.isShowD = false;
      this.isShowL = true;
    }
  }
};
</script>

<style scoped>
.trolley_container {
  width: 100%;
  height: 100%;
}
.trolley_one_container {
  width: 100%;
  height: 7.15rem;
  /* border: 1px solid red; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #c1b18f;
}
.images_container {
  width: 35%;
  height: 100%;
  /* border: 1px solid red; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.login_cotnainer {
  width: 65%;
  height: 100%;
  /* border: 1px solid red; */
  display: inline-flex;
  flex-wrap: wrap;
}
.title_container {
  width: 100%;
  font-size: 0.9rem;
  color: #fff;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.title_jifen_container {
  width: 4rem;
  height: 1.5rem;
  background-color: #b3a078;
  font-size: 0.6rem;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
}
.guangbo_container {
  width: 100%;
  height: 2rem;
  /* border: 1px solid red; */
}
.dingdan_container {
  width: 100%;
  height: 6rem;
  /* border: 1px solid red; */
}
.top_contaibner {
  width: 100%;
  height: 40%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.top_wrapper {
  width: 85%;
  height: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
}
.nav_cotnaienr {
  width: 100%;
  height: 60%;
}
.nav_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.5rem;
  color: #6d6d6d;
}
.nav_wrapper div {
  text-align: center;
}
.title_zi_container {
  font-size: 0.6rem;
}
.buttom_container {
  width: 100%;
  height: 7rem;
  /* border: 1px solid red; */
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.liu_container {
  width: 33%;
  height: 3rem;
  text-align: center;
}
i {
  font-size: 1.2rem;
}
.title_liu_container {
  font-size: 0.5rem;
}
.van-icon-gold-coin-o {
  color: rgb(250, 118, 99);
}
.van-icon-edit {
  color: #fa8a79;
}
.van-icon-coupon-o {
  color: #eeba57;
}
.van-icon-star-o {
  color: #eeba57;
}
.liu_container_qi i {
  color: #5a9fec;
}
.van-icon-service-o {
  color: #5a9fec;
}
</style>